<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table		{ border:0;border-collapse:collapse;}
td	{ font:normal 12px/17px Arial;padding:2px;width:100px;}
th			{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px	solid #333;}
.even		{ background:#FFF38F;}  /* 偶数行样式*/
.odd		{ background:#FFFFEE;}  /* 奇数行样式*/
.selected	{ background:#FF6500;color:#fff;}
</style>
<!--   引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script>
  $(function(){
		$("tbody>tr:odd").addClass("odd");
		$("tbody>tr:even").addClass("even");
		$('tbody>tr').click(function() {
			//判断当前是否选中
			var hasSelected=$(this).hasClass('selected');
			//如果选中，则移出selected类，否则就加上selected类
			$(this)[hasSelected?"removeClass":"addClass"]('selected')
				//查找内部的checkbox,设置对应的属性。
				.find(':checkbox').attr('checked',!hasSelected);
		});
		// 如果单选框默认情况下是选择的，则高色.
		$('tbody>tr:has(:checked)').addClass('selected');
  })
</script>
</head>
<body>
<table>
<thead>
<tr>
	<th> </th>
<th>姓名</th>
	<th>性别</th>
	<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
	<td><input type="checkbox" name="choice" value=""/></td>
	<td>张山</td>
	<td>男</td>
	<td>浙江宁波</td>
</tr>
<tr>
	<td><input type="checkbox" name="choice" value="" /></td>
		<td>李四</td>
	<td>女</td>
	<td>浙江杭州</td>
</tr>
<tr>
	<td><input type="checkbox" name="choice" value="" checked /></td>
			<td>王五</td>
	<td>男</td>
	<td>湖南长沙</td>
</tr>
<tr>
	<td><input type="checkbox" name="choice" value="" /></td>
	<td>找六</td>
	<td>男</td>
	<td>浙江温州</td>	
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
		<td>Rain</td>
	<td>男</td>
	<td>浙江杭州</td>
</tr>
<tr>
	<td><input type="checkbox" name="choice" value="" checked/></td>
	<td>MAXMAN</td>
	<td>女</td>
	<td>浙江杭州</td>
</tr>

</tbody>
</table>